<template>
  <page-header-wrapper :title="false">
    <a-card
      title="申请主体"
    >
      <template slot="extra">
        <a-button size="small" icon="plus" type="danger" @click="onAdd">添加</a-button>
      </template>
      <div class="table-page-search-wrapper">
        <a-form-model
          layout="inline"
          :model="queryParam"
        >
          <a-row :gutter="15">
            <a-col :md="6" :sm="24">
              <a-form-model-item label="名称">
                <a-auto-complete
                  v-model="queryParam['filter[title]']"
                  :data-source="searchSource"
                  placeholder="请输入申请主体名称"
                  @select="onSelect"
                  @search="onComplete"
                />
                <!--                <a-input v-model="queryParam['filter[subject]']" placeholder="请输入申请主体名称" />-->
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-model-item label="联系电话">
                <a-input v-model="queryParam['filter[phone]']" placeholder="请输入联系电话" />
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <span class='table-page-search-submitButtons'>
                <a-button type="primary" @click="onSearch">搜索</a-button>
                <a-button style="margin-left: 8px" @click="reset">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
      <div class="table-operator">
        <s-table
          bordered
          ref="table"
          size="middle"
          v-show="visible2"
          :row-key="(record) => record.id"
          :columns="listColumns"
          :data="listData"
        >
          <template slot="license_num" slot-scope="text,record">
            {{text}}{{record.id_card}}
          </template>
          <template slot="license_file" slot-scope="text,record">
            <div v-if="text != ''">
              <img width="60" :src="text" @click="handlePreview(text)">
            </div>
            <div v-else>
              <img style="margin-right:5px" width="60" :src="record.id_card_front" @click="handlePreview(record.id_card_front)">
              <img style="margin-right:5px" width="60" :src="record.id_card_reverse" @click="handlePreview(record.id_card_reverse)">
              <img v-if="record.personal_license_file != ''" width="60" :src="record.personal_license_file" @click="handlePreview(record.personal_license_file)">
            </div>
          </template>
        </s-table>
      </div>
    </a-card>
    <a-modal
      v-model="previewVisible"
      :footer="null"
    >
      <img style="width: 100%" :src="imgUrl" />
    </a-modal>
    <apply-modal v-if="visible" @cancel="onCancel"></apply-modal>
  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components'
import ApplyModal from '@/views/common-apply/components/ApplyModal'
import applyColumns from '@/columns/apply'
import { getSubject } from '@/api/apply'

export default {
  name: 'ApplySubject',
  components: {
    STable,
    ApplyModal
  },
  data () {
    return {
      loading: false,
      listColumns: applyColumns.subject,
      listData: parameters => {
        return getSubject(Object.assign(parameters, this.queryParam)).then(res => {
          this.typeOpts = res.result.typeOpts
          return res.result
        })
      },
      visible: false,
      queryParam: {},
      visible2: false,
      typeOpts: {},
      previewVisible: false,
      imgUrl: '',
      searchSource: []
    }
  },
  methods: {
    handlePreview (url) {
      this.imgUrl = url
      this.previewVisible = true
    },
    onAdd () {
      this.visible = true
    },
    reset () {
      this.queryParam = {}
      this.visible2 = false
    },
    onSearch () {
      this.visible2 = true
      this.$refs.table.refresh(true)
    },
    onComplete (searchText) {
      // autoSubject(searchText).then(res => {
      //   this.searchSource = res.result.subject_data
      // })
    },
    onSelect (value) {
      this.queryParam['filter[subject]'] = value
      this.$refs.table.refresh(true)
    },
    onCancel (visible) {
      this.visible = visible
      this.$refs.table.refresh()
    }
  }
}
</script>
